<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="500" style="background-color: #ffffff;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Define parameters ---
    const cx = 250;
    const cy = 260;
    const R = 130;
    const dotRadius = 3;
    const lineWidth = 2;

    // --- Draw Magnetic Field Dots ---
    // Function to draw a dot
    function drawDot(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, dotRadius, 0, 2 * Math.PI);
        ctx.fillStyle = 'black';
        ctx.fill();
    }
    // Specific dot locations from the image
    const dotPositions = [
        {x: 50, y: 50}, {x: 250, y: 50}, {x: 450, y: 50},
        {x: 50, y: 260}, {x: 450, y: 260},
        {x: 50, y: 450}, {x: 250, y: 450}
    ];
    dotPositions.forEach(pos => drawDot(pos.x, pos.y));


    // --- Draw the Circle (Ring) ---
    ctx.beginPath();
    ctx.arc(cx, cy, R, 0, 2 * Math.PI);
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = 'black';
    ctx.stroke();

    // --- Draw Dashed Vertical Diameter ---
    ctx.beginPath();
    ctx.setLineDash([6, 6]);
    ctx.moveTo(cx, cy - R);
    ctx.lineTo(cx, cy + R);
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'black';
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // --- Draw Center Point ---
    drawDot(cx, cy);

    // --- Point A / Particle P ---
    const Ax = cx;
    const Ay = cy - R;
    drawDot(Ax, Ay);

    // --- Draw Labels and Arrows ---
    ctx.fillStyle = 'black';
    ctx.font = '20px Arial';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';

    // Label A
    ctx.fillText('A', Ax + 10, Ay + 5);

    // Label R
    ctx.fillText('R', cx - R * 0.7, cy - R * 0.6);

    // Label B and its dot
    drawDot(430, 450);
    ctx.fillText('B', 440, 450);


    // Text and arrows above A
    const textY = Ay - 40;
    ctx.font = '22px Arial';
    ctx.textAlign = 'center';

    // P: m, q>0
    const text = 'P: m, q>0';
    ctx.fillText(text, Ax, textY);
    const textMetrics = ctx.measureText(text);
    const textWidth = textMetrics.width;

    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';

    // Left arrow
    const arrowLength = 60;
    const arrowGap = 10;
    const leftArrowXStart = Ax - textWidth / 2 - arrowGap;
    const leftArrowXEnd = leftArrowXStart - arrowLength;
    ctx.beginPath();
    ctx.moveTo(leftArrowXStart, textY);
    ctx.lineTo(leftArrowXEnd, textY);
    ctx.lineTo(leftArrowXEnd + 10, textY - 5);
    ctx.moveTo(leftArrowXEnd, textY);
    ctx.lineTo(leftArrowXEnd + 10, textY + 5);
    ctx.stroke();
    ctx.fillText('左', leftArrowXEnd - 20, textY);

    // Right arrow
    const rightArrowXStart = Ax + textWidth / 2 + arrowGap;
    const rightArrowXEnd = rightArrowXStart + arrowLength;
    ctx.beginPath();
    ctx.moveTo(rightArrowXStart, textY);
    ctx.lineTo(rightArrowXEnd, textY);
    ctx.lineTo(rightArrowXEnd - 10, textY - 5);
    ctx.moveTo(rightArrowXEnd, textY);
    ctx.lineTo(rightArrowXEnd - 10, textY + 5);
    ctx.stroke();
    ctx.fillText('右', rightArrowXEnd + 20, textY);

</script>
</body>
</html>